<template>
    <div>
        <van-nav-bar title="订单" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="xinxi">
        <RouterLink to="/userhome/all">
            <div>
                <div>
                    
                </div>
                <div>
                    <span>全部</span>
                </div>
            </div>
        </RouterLink>
        <RouterLink to="/userhome/fukuan">
            <div>
                <div>
                    
                </div>
                <div>
                    <span>已付款</span>
                </div>
            </div>
        </RouterLink>
        <RouterLink to="/userhome/fahuo">
            <div>
                <div>
                  
                </div>
                <div>
                    <span>发货</span>
                </div>
            </div>
        </RouterLink>
        <RouterLink to="/userhome/shouh">
            <div>
                <div>
                   
                </div>
                <div>
                    <span>收货</span>
                </div>
            </div>
        </RouterLink>
        <RouterLink to="/userhome/wsh">
            <div>
                <div>
                  
                </div>
                <div>
                    <span>未收货</span>
                </div>
            </div>
        </RouterLink>
    </div>

    <div class="shoucang" v-if="useroder.datas.length != 0">
        <div v-for="item in useroder.datas" :key="item.id">
            <div>
                <div>
                    <img :src="item.shopping.url" alt="">
                </div>
                <div>
                    <div>
                        {{ item.shopping.title }}
                    </div>
                    <div>
                        {{ item.shopping.secondTitle }}
                    </div>
                </div>
                <div>
                    <div>
                        <span>￥</span> <span>{{ item.shopping.price }}</span>
                    </div>
                    <div>
                        x{{ item.oders.num }}
                    </div>
                </div>
            </div>
            <div>
                <div>
                    订单号：<b>{{ item.oders.order_id }}</b>
                </div>
                <div>
                    实际支付：<b>{{ item.oders.price }}</b> (免运费)
                </div>
            </div>
            <div>
                <div>
                    删除订单
                </div>

            </div>
        </div>
    </div>
    <div v-else>
        <van-empty description="你还没有添加商品到购物车" />
    </div>
</template>

<script setup lang="ts">
import { selectuserodre } from '@/api';
import { reactive } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
let router = useRouter()
const onClickLeft = () => {
    router.push('/userhome')
};
let store = useStore()
let useroder = reactive({
    datas: [] as any
})
selectuserodre(store.state.userData[0].id,2).then((result: any) => {
    useroder.datas = result.data.data

}).catch((err: any) => {
    console.log(err);
});


let seleteListData = (data: any) => {
    router.push({
        path: `/xiangqing`
    })
    store.commit('updataxiangqingdata', data)
}
let removesc = (data: any, i: Number) => {


}
</script>

<style lang="less" scoped>

.van-nav-bar .van-icon{
    color: #333333;
}
.van-nav-bar__text{
    color: #333333;
}
.shoucang {
    >div {


        >div:nth-child(1) {

            display: flex;
            padding: 0rem 15rem;
            text-align: left;
            justify-content: space-around;

            >div:nth-child(2) {
                >div:nth-child(1) {
                    font-size: 14rem;
                    font-weight: 600;
                }

                >div:nth-child(2) {
                    margin-top: 5rem;
                    font-size: 14rem;
                }
            }

            >div:nth-child(3) {
                text-align: right;

                >div:nth-child(1) {
                    span:nth-child(1) {
                        font-size: 12rem;
                    }

                    span:nth-child(2) {
                        font-size: 16rem;
                        font-weight: 600;
                    }

                }

                >div:nth-child(2) {
                    margin-top: 5rem;
                    font-size: 14rem;
                }
            }
        }

        >div:nth-child(2) {
            border-top: 1px solid #f3f3f3;
            border-bottom: 1px solid #f3f3f3;
            display: flex;
            padding: 10rem 15rem;
            text-align: left;
            justify-content: space-between;
            font-size: 14rem;
        }

        >div:nth-child(3) {
            border-bottom: 8rem solid #f3f3f3;
            padding: 8rem 15rem;
            ;
            display: flex;
            justify-content: flex-end;

            >div {
                width: 80rem;
                height: 25rem;
                border: 1px solid #f3f3f3;
                border-radius: 5rem;
                line-height: 25rem;
            }
        }
    }


    img {

        width: 110rem;
        height: 110rem;
        background-color: #fafafa;
        border-radius: 10rem;
    }

}

.xinxi {

    width: 335rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    font-size: 14rem;
    margin-bottom: 15rem;
    margin-top: 8rem;

    i {
        display: block;
        font-size: 30rem;
    }
}
a {
    font-weight: bold;
    color: #2c3e50;
    text-decoration:  none;

    &.router-link-exact-active {
        padding-bottom: 5rem;
      color: red;
      border-bottom: 3rem solid red;
    }
  }
</style>